<%@ page language="java" pageEncoding="utf-8" contentType="text/html; charset=utf-8"%>
<link rel="stylesheet" type="text/css" href="${$res_path_resources}/extjs3.4/ux/css/Portal.css" />
<script type="text/javascript" src="${$res_path_resources}/extjs3.4/ux/Portal.js" charset="utf-8"></script>
<script type="text/javascript" src="${$res_path_resources}/extjs3.4/ux/PortalColumn.js" charset="utf-8"></script>
<script type="text/javascript" src="${$res_path_resources}/extjs3.4/ux/Portlet.js" charset="utf-8"></script>
<style>
.x-portlet {
	margin-bottom: 2px;
	padding-top: 1px;
	padding-right: 0px;
	padding-left: 1px;
}

.c1 {
	margin: 50px;
}
</style>
<script type="text/javascript">
	Ext.onReady(function() {
		var tools = [ {
			id : 'gear',
			handler : function() {
				Ext.Msg.alert('Message', 'The Settings tool was clicked.');
			}
		}, {
			id : 'close',
			handler : function(e, target, panel) {
				panel.ownerCt.remove(panel, true);
			}
		} ];

		var viewport = new Ext.Panel({
			renderTo : "target",
			width : $("#target").width(),
			height : $("#target").height(),
			layout : 'border',
			border : false,
			items : [ {
				xtype : 'portal',
				border : false,
				bodyStyle : "background:#eee;",
				region : 'center',
				items : [ {
					columnWidth : .4,
					style : 'padding:1px 0 1px 1px',
					items : [ {
						title : '待办任务列表',
						collapsible : false,
						iconCls : "p-panel",
						height : 600,
						layout : 'fit',
						tools : tools,
						tbar : {
							xtype : 'toolbar',
							items : [ {
								xtype : 'label',
								text : '任务检索：'
							}, {
								xtype : 'textfield',
								hideLabel : false
							}, {
								xtype : 'button',
								text : '搜'
							} ]
						},
						items : new SampleGrid([ 0, 2, 3 ])
					} ]
				}, {
					columnWidth : .3,
					style : 'padding:1px 0 1px 1px',
					items : [ {
						title : '我的信息',
						iconCls : "p-panel",
						html : '<div class="c1">正在建设中...</div>'
					}, {
						title : '邮件提醒',
						iconCls : "p-panel",
						tools : tools,
						tbar : {
							xtype : 'toolbar',
							items : [ {
								xtype : 'label',
								text : '按钮'
							} ]
						},
						html : '<div class="c1">正在建设中...</div>'
					}, {
						title : '站内短信',
						iconCls : "p-panel",
						tools : tools,
						html : '<div class="c1">正在建设中...</div>'
					} ]
				}, {
					columnWidth : .3,
					style : 'padding:1px',
					items : [ {
						title : '今日通知',
						iconCls : "p-panel",
						html : '<div class="c1">正在建设中...</div>'
					}, {
						title : '系统日志',
						iconCls : "p-panel",
						tools : tools,
						tbar : {
							xtype : 'toolbar',
							items : [ {
								xtype : 'label',
								text : '按钮'
							} ]
						},
						tools : tools,
						html : '<div class="c1">正在建设中...</div>'

					} ]
				} ]
			} ]
		// end items
		}); // end viewport

	}); // end onReady
</script>

<div id="portalContainer"></div>

<script type="text/javascript">
	SampleGrid = function(limitColumns) {

		function italic(value) {
			return '<i>' + value + '</i>';
		}

		function change(val) {
			if (val > 0) {
				return '<span style="color:green;">' + val + '</span>';
			} else if (val < 0) {
				return '<span style="color:red;">' + val + '</span>';
			}
			return val;
		}

		function pctChange(val) {
			if (val > 0) {
				return '<span style="color:green;">' + val + '%</span>';
			} else if (val < 0) {
				return '<span style="color:red;">' + val + '%</span>';
			}
			return val;
		}

		var columns = [ {
			id : 'company',
			header : "任务名称",
			width : 160,
			sortable : true,
			dataIndex : 'company'
		}, {
			header : "Price",
			width : 75,
			sortable : true,
			renderer : Ext.util.Format.usMoney,
			dataIndex : 'price'
		}, {
			header : "重要性",
			width : 75,
			sortable : true,
			renderer : change,
			dataIndex : 'change'
		}, {
			header : "完成度",
			width : 75,
			sortable : true,
			renderer : pctChange,
			dataIndex : 'pctChange'
		}, {
			header : "Last Updated",
			width : 85,
			sortable : true,
			renderer : Ext.util.Format.dateRenderer('m/d/Y'),
			dataIndex : 'lastChange'
		} ];

		// allow samples to limit columns
		if (limitColumns) {
			var cs = [];
			for ( var i = 0, len = limitColumns.length; i < len; i++) {
				cs.push(columns[limitColumns[i]]);
			}
			columns = cs;
		}

		SampleGrid.superclass.constructor.call(this, {
			store : new Ext.data.Store({
				reader : new Ext.data.ArrayReader({}, [ {
					name : 'company'
				}, {
					name : 'price',
					type : 'float'
				}, {
					name : 'change',
					type : 'float'
				}, {
					name : 'pctChange',
					type : 'float'
				}, {
					name : 'lastChange',
					type : 'date',
					dateFormat : 'n/j h:ia'
				} ]),
				data : [ [ '3m Co', 71.72, 0.02, 0.03, '9/1 12:00am' ], [ 'Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am' ],
						[ 'Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am' ], [ 'American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am' ],
						[ 'American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am' ], [ 'AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am' ],
						[ 'Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am' ], [ 'Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am' ],
						[ 'Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am' ], [ 'E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am' ],
						[ 'Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am' ], [ 'General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am' ],
						[ 'General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am' ], [ 'Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am' ],
						[ 'Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am' ], [ 'Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am' ] ]
			}),
			columns : columns,
			autoExpandColumn : 'company',
			height : 250,
			width : 600,
			frame : false,
			border : false
		});
	}

	Ext.extend(SampleGrid, Ext.grid.GridPanel);
</script>
